<template>
	<view class="index-container">
		<div class="header-fixed" :style="{
			backgroundColor: 'rgba(255,255,255,' + scrollTop / 100 + ')',
			boxShadow: '0 0 10rpx rgba(0,0,0,' + Math.min(0.5, scrollTop / 100-0.5) + ')'
		}">

			<view>
				<div style="height:50rpx;"></div>
				<div class="header">
					<div class="back center" @click="back">
						<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
					</div>
					<p>{{$t('车源信息')}}</p>
					<!-- <div @click="goHistory">
						<image src="/static/icon/historyIcon.png" mode="widthFix" class="historySty"></image>
					</div> -->
				</div>
			</view>
			<div class="flex-start pt-16 pl-24 pr-24">
				<div class="filterBox" style="white-space: nowrap;">
					<picker range-key="name" mode="selector" :range="statusList" @change="() => {
						params.status = statusList[$event.detail.value].id
						statusTitle = statusList[$event.detail.value].name
						getCarList(true)
					}">
						<div class="between h-80 pl-15 pr-15">
							<div class="fz24 text-333 mr-10">{{ statusTitle }}</div>
							<image src="/static/icon/down.png" mode="widthFix" class="w-20 mt-5"></image>
						</div>
					</picker>
				</div>

				<div class="filterBox ml-15">
					<picker range-key="name" mode="selector" :range="modeList" @change="() => {
						params.mode = modeList[$event.detail.value].id
						modeTitle = modeList[$event.detail.value].name
						params.brand = null
						carKindTitle = '载具类型'
						getCarList(true)
						getCarList(true)
					}">
						<div class="between h-80 w-full pl-20 pr-20">
							<div class="fz24 text-333 mr-10">{{ modeTitle }}</div>
							<image src="/static/icon/down.png" mode="widthFix" class="w-20 mt-5"></image>
						</div>
					</picker>
				</div>
				<div class="filterBox ml-15">
					<picker range-key="val_name" mode="selector" :range="carBrandList" @change="() => {
						params.brand = carBrandList[$event.detail.value].val
						carKindTitle = carBrandList[$event.detail.value].val_name
						getCarList(true)
					}">
						<div class="between h-80 w-full pl-20 pr-20">
							<div class="fz24 text-333 mr-10">{{ carKindTitle }}</div>
							<image src="/static/icon/down.png" mode="widthFix" class="w-20 mt-5"></image>
						</div>
					</picker>
				</div>
				<div class="filterBox ml-15">
					<div class="between h-80 w-full pl-20 pr-20" @click="showAddress = true">
						<div class="fz24 text-333 mr-10 ellipsis w-100">{{ lineCheck }}</div>
						<image src="/static/icon/down.png" mode="widthFix" class="w-20 mt-5"></image>
					</div>
					<u-popup :show="showAddress" @close="showAddress = false" :closeable="true" class="w-full h-80">
						<view class="cityBox" style="margin-top: 60rpx;">
							<view class="citySty">
								<!-- city是封装的全局地址组件，支持搜索 -->
								<city is_all="true" style="width: 100%;" @change="e => {
									fullBeginAddress = e.column2.value == -1 || e.column3.value == -1 ?
									[e.column1.label, e.column2.label.replace('全部', ''), e.column3.label.replace('全部', '')].filter(item => item).join(',') :
									e.column3.label;
									fullBeginAddressKey = [e.column1.value, e.column2.value, e.column3.value].join(',');
								}">{{ fullBeginAddress || $t('起点') }}</city>
							</view>
							<image src="@/static/icon/change.png" mode="" @click="() => {
								const fullBeginAddressTemp = fullBeginAddress
								const fullBeginAddressKeyTemp = fullBeginAddressKey
								fullBeginAddress = fullEndAddress
								fullBeginAddressKey = fullEndAddressKey
								fullEndAddress = fullBeginAddressTemp
								fullEndAddressKey = fullBeginAddressKeyTemp
							}"></image>
							<view class="citySty text-left">
								<city style="width: 100%;" is_all="true" @change="e => {
									fullEndAddress = e.column2.value == -1 || e.column3.value == -1 ?
									[e.column1.label, e.column2.label.replace('全部', ''), e.column3.label.replace('全部', '')].filter(item => item).join(',') :
									e.column3.label;
									fullEndAddressKey = [e.column1.value, e.column2.value, e.column3.value].join(',');
								}">
									<div class="w-full text-right">{{ fullEndAddress || $t('终点') }}</div>
								</city>
							</view>
						</view>
						<view class="evenly mb-20">
							<view @click="reset" class="cancelSty">{{$t('重置')}}</view>
							<view @click="confirmAddress" class="confirmSty">{{$t('确认')}}</view>
						</view>
					</u-popup>
				</div>
			</div>
		</div>

		<div style="height: 230rpx;"></div>


		<view style="height:100%">
			<view v-for="(item, index) in carList" :key="index">
				<!-- <div class="flex-1" style="overflow-y: auto;"> -->
				<div class="vehicle-item">
					<div class="status" :class="{ statusIng: item.status === 3 }">
						<span v-if="item.status === 1">{{$t('空闲中')}}</span>
						<span v-if="item.status === 2">{{$t('待出发')}}</span>
						<span v-if="item.status === 3">{{$t('进行中')}}</span>
						<span v-if="item.status === 4">{{$t('停运')}}</span>
					</div>
					<div class="content">
						<div @click="goDetail(item)">
							<div class="flex mt-40 ml-30">
								<image src="../../static/icon/vehicle_type_2.png" mode="aspectFill" class="w-60 h-60 ml-24" v-if="item.mode == 2"></image>
								<image src="../../static/icon/vehicle_type_3.png" mode="aspectFill" class="w-60 h-60 ml-24" v-if="item.mode == 3"></image>
								<image src="../../static/icon/vehicle_type_4.png" mode="aspectFill" class="w-60 h-60 ml-24" v-if="item.mode == 4"></image>
								<image src="../../static/icon/vehicle_type_5.png" mode="aspectFill" class="w-60 h-60 ml-24" v-if="item.mode == 5"></image>

								<div>
									<div class="fz30 font-bold ml-15"
										style="width: 400rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
										{{get(item, "driver.title") }}
									</div>
									<div class="flex">
										<view class="carBox">
											<view class="carCard">
												{{ item.car_number }}
												<text v-if="item.trailer_number">{{$t('挂')}}{{ item.trailer_number }}</text>
											</view>
										</view>
									</div>
								</div>
							</div>
							<div class="mt-15 ml-50">
								<div class="text-999 fz22 ellipsis w-full pr-50">
									{{$t('当前绑定')}}：{{ get(item, "user.username") || "暂未绑定" }}
								</div>
							</div>
							<div class="between mt-24 ml-35"
								style="border-radius: 16rpx;background-color: #F8F8F8;width:90%;">
								<div class="flex flex-col pt-16 pb-16 pl-30 pr-30">
									<div class="font-bold fz25 text-333">{{ get(item, 'car_category_name.title') }}
									</div>
									<div class="fz22 text-666 mt-10">{{$t('载具类型')}}</div>
								</div>
								<div class="flex flex-col pt-16 pb-16 pl-30 pr-30">
									<div class="font-bold fz25 text-333">{{ item.car_l }}*{{ item.car_w }}*{{ item.car_h
										}}
									</div>
									<div class="fz22 text-666 mt-10">{{$t('车厢尺寸')}}(m)</div>
								</div>
								<div class="flex flex-col pt-16 pb-16 pl-30 pr-30">
									<div class="font-bold fz25 text-333">{{ item.product_weight }}{{$t('吨')}}</div>
									<div class="fz22 text-666 mt-10">{{$t('载重')}}</div>
								</div>
								<div class="flex flex-col pt-16 pb-16 pl-30 pr-30">
									<div class="font-bold fz25 text-333">{{ item.product_volume }}m³</div>
									<div class="fz22 text-666 mt-10">{{$t('体积')}}</div>
								</div>
							</div>
							<div class="between mt-12 rounded-8 p-18 data ml-35" :class="{
								bgBlue: item.status === 1,
								bgOrang: item.status === 2 || item.status === 3 || item.status === 4
							}" style="position:relative;width:90%;">
								<div class="current"
									:class="{ idleIng: item.status === 1, jobIng: item.status === 2 || item.status === 3 || item.status === 4 }">
									{{ item.status == 1 ? $t('期望') : $t('当前') }}
								</div>
								<p class="ml-30 fz26 text-gray-3d3d3d" v-if="item.status === 1">
									{{ get(item, "luxian.0.cfd.name") }}
									-
									{{ get(item, "luxian.0.mdd.name") }}
								</p>
								<p class="ml-30 fz26 text-gray-3d3d3d"
									v-if="item.status === 2 || item.status === 3 || item.status === 4">
									{{ get(item, "order_delivery.0.departure.area_info.name") }}
									-
									{{ get(item, "order_delivery.0.reach.area_info.name") }}
								</p>
								<!-- <div class="flex ml-50">
									<div class="text-666 fz22">{{$t('曝光量')}}：</div>
									<div class="fz22 text-333 font-bold">{{ item.exposure_number }}</div>
								</div>
								<div class="flex">
									<div class="text-666 fz22">{{$t('查看量')}}：</div>
									<div class="fz22 text-333 font-bold">{{ item.lookat_number }}</div>
								</div>
								<div class="flex mr-50">
									<div class="text-666 fz22">{{$t('咨询量')}}：</div>
									<div class="fz22 text-333 font-bold">{{ item.comment_number }}</div>
								</div> -->
							</div>
						</div>
						<div class="between ml-50 mr-50 pb-40">
							<div class="text-999 fz26 flex">
								<image src="/static/icon/address.png" mode="widthFix" class="w-20 mr-14"></image>
								{{ get(item, 'area.name') }}
							</div>

							<div class="flex justify-end mt-22 mb-9 fz24" @click="call(item)">
								<image src="/static/icon/message.png" mode="widthFix" class="w-25"></image>
								<div class="text-888 ml-8 text-888 fz24">{{$t('联系')}}TA</div>
							</div>
						</div>
					</div>
				</div>
				<!-- </div> -->
			</view>
		</view>
		<div v-if="nomore" class="center text-gray-500 fz24 pt-20 pb-20">{{$t('没有更多了')}}</div>
	</view>
</template>

<script>
import { carSource, carBrand } from '@/api/vehicle.js'
import { request_minute } from '@/api/basic'
export default {
	components: {
	},
	data() {
		return {
			statusTitle: this.$t('状态'),
			modeTitle: this.$t('运输'),
			carKindTitle: this.$t('载具'),
			lineCheck: this.$t('路线'),
			lineBegin: this.$t('起点'),
			lineEnd: this.$t('起点'),
			fullEndVal: '',
			fullBeginVal: '',
			showAddress: false,
			statusList: [
				{ id: '1', name: this.$t('空闲') },
				{ id: '2', name: this.$t('待出发') },
				{ id: '3', name: this.$t('工作中') },
				{ id: '4', name: this.$t('停运') }
			],
			modeList: [
				{ id: '2', name: this.$t('汽运') },
				{ id: '3', name: this.$t('空运') },
				{ id: '4', name: this.$t('海运') },
				{ id: '5', name: this.$t('铁路') }
			],
			carBrandList: [],
			// carKindList: [
			// 	{ id: 2, name: '汽运-平板车' },
			// 	{ id: 3, name: '汽运-罐装车' },
			// 	{ id: 4, name: '汽运-厢式货车' },
			// 	{ id: 5, name: '铁路-罐装' }
			// ],
			fullBeginAddress: '',
			fullBeginAddressKey: '',
			fullEndAddress: '',
			fullEndAddressKey: '',
			barIndex: '',
			carList: [],
			params: {
				// 用户id
				// uni.getStorageSync('user_id')
				user_id: uni.getStorageSync('user_id'),
				// 载具id
				// 运输方式: 0不限 1其他 2汽运 3空运 4海运 5铁路
				mode: '',
				// 状态: 1空闲 2待出发 3进行中 4停用
				status: '',
				brand: '',
				transport_list: '',
				page: 1,
			},
			nomore: false,
			scrollTop: 0,
			statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	mounted() {
		this.getCarList()
		this.getCarBrand()
	},
	watch: {
		'params.mode': {
			handler(newVal, oldVal) {
				this.barIndex = newVal
				this.getCarBrand()
				console.log('90000------', newVal)
			},
			deep: true
		}
	},
	methods: {
		back() {
			this.cback()
		},
		call(info) {
			if(uni.getStorageSync("user_id") == info.user.id) {
				uni.showToast({
					title: this.$t('不能给自己打电话'),
					icon: "none",
				});
			} else {
				request_minute({
					user_id: uni.getStorageSync("user_id"),
						target_id: info.user.id,
				}).then(res => {
					if (res.data.data.flag == 1) {
						this.isMessageGo({
							action: 'call',
							data: {
								userId: info.user.id,
									type: res.data.data.type || 1,
							}
						})
					} else {
						uni.$u.toast('积分不足，请充值积分')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/vip/scorePoint',
							})
						}, 500)
					}
					console.log('res0000', res)
				})
			}
		},
		formatLabel(row) {
			return `${row.text} - ${row.title}`; // 拼接label和extra字段
		},
		//下拉刷新
		onPullDownRefresh() {
			this.getCarList(true)
		},
		//上拉加载
		onReachBottom() {
			this.params.page++
			this.getCarList()
		},
		confirmAddress() {
			this.params.transport_list = [this.fullBeginAddressKey, this.fullEndAddressKey].join(',')
			this.lineCheck = this.fullBeginAddress + this.fullEndAddress
			// this.params.area_id = this.fullBeginAddressKey
			// this.params.reach_id = this.fullEndAddressKey
			this.showAddress = false
			this.getCarList(true)
		},
		reset() {
			this.params.transport_list = ''
			this.lineCheck = this.$t('路线')
			this.fullBeginAddress = ''
			this.fullEndAddress = ''
			this.showAddress = false
			this.getCarList(true)
		},
		getCarBrand() {
			carBrand({ barIndex: this.barIndex }).then(res => {
				if (res.data.code == 200) {
					this.carBrandList = res.data.data.data || []
				}
			})
		},
		goHistory() {
			uni.navigateTo({
				url: "/pages/driverTask/unbindInvitation"
			})
		},
		getCarList(init) {
			if (init) {
				this.params.page = 1
				this.nomore = false;
			}
			carSource(this.params).then(res => {
				if (res.data.code === 200) {
					if (this.params.page == 1) {
						this.carList = res.data.data.data || []
					} else {
						this.carList = [...this.carList, ...res.data.data.data]
					}
					if (this.get(res, 'data.data.data').length == 0) {
						this.nomore = true;
					}
				}
				// 结束下拉刷新
				console.log(this.carList,'??????')
				uni.stopPullDownRefresh()
			})
		},
		goDetail(item) {
			uni.navigateTo({
				url: `/pages/vehicleSourceInformation/carInfo?item=${JSON.stringify(item)}`
			})
		}
	}
}
</script>

<style lang="less">
.header-fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
}

page {
	background-color: #F6F7FB;
}

.index-container {
	width: 100%;
	height: 100%;
	background: #F6F7FB url("/static/bg/backcolorImg.png") no-repeat top / 100%;
	// position: fixed;
	// z-index: 60;
}

.vehicle-item {
	margin-top: 16rpx;
	height: 380rpx;
	position: relative;
	margin-bottom: 60rpx;

	.content {
		background-image: url("/static/bg/vehicle-item-bg.png");
		background-size: 100% 100%;
		width: 100%;
		z-index: 2;
		position: absolute;
		top: 0;
		left: 0;

		.bgBlue {
			background-color: #EAF6FF;
		}

		.bgOrang {
			background-color: #FFF7EA;
		}

		.carBox {
			// width: 194rpx;
			// height: 44rpx;
			padding: 0;
			padding: 5rpx;
			border-radius: 6px;
			background: #FCCE00;
			margin-left: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.carCard {
				// width: 186rpx;
				padding: 5rpx 10rpx;
				flex-shrink: 0;
				border-radius: 6rpx;
				border: 0.5rpx solid rgba(29, 29, 29, 0.47);
				border-radius: 6rpx;
				// background: #FCCE00;
				color: #1D1D1D;
				font-size: 24rpx;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.current {
			width: 28rpx;
			color: #fff;
			position: absolute;
			height: 100%;
			left: 0;
			font-size: 22rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			border-radius: 8rpx 0 0 8rpx;
		}

		.idleIng {
			background: linear-gradient(288.98deg, #66D6E2 2.03%, #278AFF 104.95%);
		}

		.jobIng {
			background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
		}
	}

	.working {
		background-image: url("/static/bg/working.png");
		background-size: 100% 100%;
		width: 100%;
	}


	.status {
		width: 200rpx;
		height: 70rpx;
		position: absolute;
		z-index: 1;
		right: 25rpx;
		top: 25rpx;
		background: linear-gradient(100.15deg, #66D6E2 4%, #278AFF 81.09%);
		border-radius: 0 15rpx 0 0;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		padding-left: 50rpx;
		padding-top: 10rpx;
		font-weight: 500;
	}

	.statusIng {
		background: linear-gradient(100.15deg, #FF5401 4%, #FFB601 81.09%);
	}

}

.current {
	width: 28rpx;
	color: #fff;
	position: absolute;
	background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
	height: 100%;
	left: 0;
	font-size: 22rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 8rpx 0 0 8rpx;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
	// padding-top: 18rpx;
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 15rpx;
}

.historySty {
	width: 30rpx;
	height: 30rpx;
	position: absolute;
	right: 40rpx;
	top: 40rpx;
}

.filterBox {
	width: 24%;
	// margin-left: 18rpx;
	height: 80rpx;
	background: #fff;
	border-radius: 18rpx;

	.cancelSty {
		height: 74rpx;
		width: 200rpx;
		border-radius: 500rpx;
		background-color: #F0F0F0;
		line-height: 74rpx;
		text-align: center;
		color: #1d1d1d;
	}

	.confirmSty {
		height: 74rpx;
		line-height: 74rpx;
		width: 200rpx;
		border-radius: 500rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		text-align: center;
		color: #fff;
	}

	/deep/ .u-icon__icon {
		font-size: 30rpx !important;
	}
}

.cityBox {
	width: 96%;
	height: 90rpx;
	display: flex;
	justify-content: space-evenly;
	margin-bottom: 36rpx;

	.citySty {
		width: 274rpx;
		height: 100%;
		border-bottom: 2rpx solid #F0F0F0;
		color: #0E0E0E;
		font-family: "PingFang SC";
		font-size: 36rpx;
		font-style: normal;
		font-weight: 600;
	}

	image {
		width: 60rpx;
		height: 60rpx;
	}
}
</style>
